.PexExtension {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  min-width: 1180px;
  min-height: 720px;
  overflow: hidden;
  background-color: #ffffff;
  // background: #ffffff url('../../assets/images/pex/ext-landing-page/background.svg');
  // background-size: cover;

  @media screen and (max-width: 420px) {
    min-width: unset;
    min-height: 600px;
  }

  &Content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .Heading {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-right: 7px;
      padding: 50px 0 30px;
      min-width: 760px !important;
      @media screen and (max-width: 420px) {
        flex-direction: column;
        justify-content: center;
        padding: 0;
        width: auto !important;
        min-width: auto !important;
      }
      @media screen and (min-width: 1140px) {
        height: 184px;
      }
    }
    .AppIcons {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex: 1;
      .Icon {
        display: inline-block;
        width: 64px;
        height: 64px;
      }
      @media screen and (max-width: 420px) {
        flex-direction: column;
        justify-content: center;
        padding: 30px;
        .Icon {
          text-align: center;
          margin-bottom: 10px;
        }
      }
      .LineText {
        font-weight: 700;
        margin-left: 6px;
        > span {
          display: block;
        }
        @media screen and (max-width: 420px) {
          text-align: center;
        }
      }
      .HeadLine {
        font-size: 2rem;
        @media screen and (max-width: 1440px) {
          font-size: 1.4rem;
        }
      }
      .HighlightText {
        color: #F5A623;
      }
      .Describes {
        font-family: "azo-sans-web",sans-serif;
        font-size: 1.2rem;
        font-weight: 400;
        @media screen and (max-width: 1440px) {
          font-size: 1rem;
        }
      }
    }
    .ActionGetApp {;
      text-align: center;
      @media screen and (max-width: 420px) {
        position: absolute;
        top: 500px;
      }
      .NoteText {
        display: block;
        font-size: 1rem;
        margin-bottom: 6px;
        @media screen and (max-width: 1440px) {
          font-size: 0.75rem;
        }
      }
      > a.btn img {
        width: 32px;
        height: 32px;
        margin: 0 10px 0 0;
        @media screen and (max-width: 1440px) {
          width: 20px;
          height: 20px;
        }
      }
      > a.btn {
        font-size: 1.2rem;
        min-width: 240px;
        @media screen and (max-width: 1440px) {
          font-size: 0.85rem;
          min-width: 180px;
        }
      }
    }
  }

  .GuideClipArea {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    .MacBook {
      max-height: 100%;
      align-self: flex-start;
    }
    .FrameClip {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 2;
      text-align: center;
      margin: 0 auto;
      padding-top: 5px;
      @media screen and (max-width: 420px) {
        padding-top: 2px;
      }
      .FrameContent {
        height: 92%;
        width: 135.7%;
        overflow: hidden;
        transform: translateX(-13.75%);
        border-radius: 40px 40px 7px 7px;
        @media screen and (max-width: 420px) {
          border-radius: 15px 15px 7px 7px;
        }
      }
      > img.GuideClip {
        height: 100%;
        margin-right: 3px;
      }
      .FrameBorder,
      .videoClip {
        width: 100%;
        height: 100%;
      }
    }
  }
  .GuideClipAreaInner {
    position: relative;
    display: inline-flex;
    height: 100%;
    max-height: 100%;
    text-align: center;
    margin: 0 auto;
    @media screen and (max-width: 420px) {
       display: block;
    }
    @media screen and (max-width: 1569px) {
      // height: auto;
    }
  }
}
